<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">

            <el-form label-width="400px" :inline="true">
                <el-form-item label="">
                    <el-input placeholder="用户名" v-model="userInput" type="text" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon='el-icon-search' @click="searchHandle">查询</el-button>
                    <el-button style="width:89px;height:41px" @click="userInput = ''">清空</el-button>
                </el-form-item>
                <br>
                <el-form-item>
                    <el-button type="primary" size="default" @click="tjHandle">添加</el-button>
                    <el-button type="danger" :disabled="flag" size="default" @click="">批量删除</el-button>
                </el-form-item>
                <el-dialog title="添加用户" :visible.sync="dialogFormVisible" :before-close="handleClose">
                    <el-form :inline="false">
                        <el-form-item label="用户名称">
                            <!-- -->
                            <el-input placeholder="" type="text" clearable style="width:700px" v-model="Uname">
                            </el-input>
                        </el-form-item>
                        <br>
                        <el-form-item label="用户昵称">
                            <el-input placeholder="" type="text" clearable style="width:700px" v-model="Nname">
                            </el-input>
                        </el-form-item>
                        <br>
                        <el-form-item label="用户密码">
                            <el-input placeholder="" type="text" clearable style="width:700px" v-model="Pass">
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="registerHandle">确 定</el-button>
                    </div>
                </el-dialog>
            </el-form>
            <!--   渲染数据 -->
            <el-table border stripe :data="userList.items" @selection-change="selectHandle">
                <el-table-column type='selection' width="50" align="center"></el-table-column>
                <el-table-column type='index' label="序号" width="50" align="center"></el-table-column>
                <el-table-column label="用户名" prop='username'></el-table-column>
                <el-table-column label="用户昵称" prop="nickName"></el-table-column>
                <el-table-column label="角色列表" prop="roleName"></el-table-column>
                <el-table-column label="创建时间" prop='gmtCreate'></el-table-column>
                <el-table-column label="更新时间" prop="gmtModified"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <!-- scope.row -->
                        <el-button icon="el-icon-user-solid" type="info" circle size="mini" @click="fpList(scope.row)"
                            style="margin-right:10px;"></el-button>
                        <el-dialog title="分配权限" :visible.sync="dialog" :before-close="quxiaoshuju">
                            <el-form :inline="false">
                                <el-form-item label="设置角色">
                                    <!-- -->
                                    <el-input placeholder="" type="text" clearable style="width:700px"
                                        :value="scope.row.username" disabled>
                                    </el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="角色列表">
                                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                                        @change="handleCheckAllChange" style="margin-left:-244px">全选</el-checkbox>
                                    <div style="margin: 15px 0;"></div>

                                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                        <el-checkbox v-for="(val, index) in cities" :label="val.roleName" :key="val.id">
                                            {{ val.roleName }}
                                        </el-checkbox>
                                    </el-checkbox-group>

                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="quxiaoshuju">取 消</el-button>
                                <el-button type="primary" @click="qxfp(scope.row.id)">确 定</el-button>
                            </div>
                        </el-dialog>



                        <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="tjHandle1(scope.row)">
                        </el-button>
                        <el-dialog title="修改用户" :visible.sync="dialogForm" :before-close="handleClose">
                            <el-form :inline="false">
                                <el-form-item label="用户名称">
                                    <!-- -->
                                    <el-input placeholder="" type="text" clearable style="width:700px" v-model="Uname">
                                    </el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="用户昵称">
                                    <el-input placeholder="" type="text" clearable style="width:700px" v-model="Nname">
                                    </el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogForm = false">取 消</el-button>
                                <el-button type="primary" @click="updatas(scope.row)">确 定</el-button>
                            </div>
                        </el-dialog>


                        <el-popconfirm title="确定删除吗？" @confirm="deleteHandle(scope.row)" style="margin-left:10px">
                            <el-button slot="reference" type="danger" icon="el-icon-delete-solid" circle size="mini">
                            </el-button>
                        </el-popconfirm>
                    </template>

                </el-table-column>
            </el-table>
            <!-- current-page 当前页
                page-sizes  下拉显示
                :page-size 每页显示的条数
                total 总数据
                :current-page="pageCurrent"
                size-change  每页条数改变触发事件
                current-change 当前页改变时候触发
            -->
            <el-pagination background :current-page="pageCurrent" :page-sizes="[2, 3, 5]" :page-size="pageSize"
                layout=" prev, pager, next,jumper ,->,total, sizes" :total="userList.total" @size-change="sizeHandle"
                @current-change="currentHandle">
            </el-pagination>
        </el-card>

    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            userInput: '',
            flag: true,
            pageCurrent: 1,
            pageSize: 2,
            ArrList: [],
            dialogFormVisible: false,
            dialogForm: false,
            dialog: false,
            Uname: '',
            Nname: '',
            Pass: '',
            checkAll: false,
            checkedCities: [],
            isIndeterminate: true

        }
    },
    beforeMount() {
        this.getUserName(this.pageCurrent, this.pageSize, this.userInput)
    },
    computed: {
        ...mapState({
            userList: state => state.userList.userList
        }),
        ...mapState({
            cities: state => state.userList.QBArrList
        }),

    },

    methods: {

        quxiaoshuju() {
            this.dialog = false
            this.checkedCities = []
        },

        //点击权限分配确定的按钮 
        qxfp(userId) {
            console.log(this.checkedCities);
            this.cities.forEach(item => {
                item.xz = false
                this.checkedCities.forEach(name => {
                    if (item.roleName == name) {
                        item.xz = true
                    } else {
                    }
                })
            })

            let rs = this.cities.filter(item => {
                return item.xz == true
            })

            let roleId = []
            rs.forEach(item => {
                roleId.push(item.id)
            })

            this.$store.dispatch('userList/getDoAssign', { userId, roleId: roleId.join(",") })
            this.dialog = false
            this.checkedCities = []
        },
        handleCheckAllChange(val) {

            if (val) {
                this.cities.forEach(item => {
                    this.checkedCities.push(item.roleName)
                    this.isIndeterminate = false
                })
            } else {
                this.checkedCities = []
                this.isIndeterminate = false
            }

        },


        handleCheckedCitiesChange(value) {
            console.log(value);
            this.checkedCities = [...value]
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },


        //点击分配权限获取数据
        async fpList(row) {
            this.dialog = true
            await this.$store.dispatch("userList/getUpdataList", row.id)
            let rs = this.$store.state.userList.QBArrList.filter(item => {
                return item.xz == true
            })
            rs.forEach(item => {
                this.checkedCities.push(item.roleName)
            })

        },

        //请求数据
        getUserName(pageCurrent, pageSize, userInput) {
            // 调用仓库的actions   仓库名字/仓库中的方法     
            this.$store.dispatch('userList/getUserList', { pageCurrent, pageSize, userInput })
        },
        //分页器回调
        sizeHandle(sizeChange) {
            this.pageSize = sizeChange
            this.getUserName(this.pageCurrent, this.pageSize, this.userInput)
        },
        //当前页回调
        currentHandle(currentChange) {
            this.pageCurrent = currentChange
            this.getUserName(this.pageCurrent, this.pageSize, this.userInput)
        },
        //点击复选框触发的事件  拿到当前item信息
        selectHandle(selectionChange) {
            if (selectionChange.length) {
                this.flag = false
            } else {
                this.flag = true
            }
        },
        //点击搜索的回调
        searchHandle() {
            this.$store.dispatch('userList/getUserList', { pageCurrent: this.pageCurrent, pageSize: this.pageSize, userInput: this.userInput })
        },

        //添加按钮的回调
        tjHandle() {
            this.dialogFormVisible = true
        },
        //修改的回调
        tjHandle1(row) {
            this.dialogForm = true
            this.Uname = row.username
            this.Nname = row.nickName

        },

        //删除的回调
        deleteHandle(item) {
            this.$store.dispatch('userList/deldeteHandle', item.id)
            this.getUserName(this.pageCurrent, this.pageSize, this.userInput)
        },
        //关闭弹框的回调
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        //添加数据回调
        registerHandle() {
            this.dialogFormVisible = false

            this.$store.dispatch('userList/getregister', {
                Uname: this.Uname,
                Nname: this.Nname,
                Pass: this.Pass,
            })


            this.getUserName(this.pageCurrent, this.pageSize, this.userInput)
            this.Uname = ''
            this.Nname = ''
            this.Pass = ''
        },
        //修改的数据回调
        updatas(row) {
            this.dialogForm = false
            row.nickName = this.Nname
            row.username = this.Uname
            this.$store.dispatch('userList/getUpdate', row)
            this.getUserName(this.pageCurrent, this.pageSize, this.userInput)
        }
    }
}
</script>

<style scoped>
/deep/.el-form-item__label {
    width: 100px;
}
</style>